<!--
 * @Description: 数据中心看板首页
 * @Author: Huang Junjie
 * @Date: 2021-10-19 10:43:42
 * @LastEditTime: 2021-10-21 16:23:13
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <!-- 背景色 -->
    <div class="background-color" />
    <!-- 背景色 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar active-item="/index" />
    <!-- 顶部导航栏 -->

    <!-- 页面内容 -->
    <div class="content">
      <!-- 顶部按钮 -->
      <div class="top-btn-div">
        <div class="top-btn">数据搜索</div>
        <div class="top-btn">数据管理</div>
        <div class="top-btn">数据接口管理</div>
        <div class="top-btn">字典管理</div>
      </div>
      <!-- 顶部按钮 -->

      <!-- 满足六个段接口切换选择 -->
      <div class="unit-dept-select">
        <select-tree
          v-model="deptId"
          node-click
          :options="deptTreeList"
          :props="{ label: 'label', value: 'id', parent: 'parentId', children: 'children' }"
          @nodeClick="changeUnitCodeParams"
        />
      </div>
      <!-- 满足六个段接口切换选择 -->

      <!-- 页面左边内容 -->
      <div class="inner-content-left">
        <!-- Logo组件 -->
        <logo class="logo-style" :dept-name="deptName" />
        <!-- Logo组件 -->

        <!-- 管辖运营情况组件 -->
        <operation-under-jurisdiction
          class="operation-under-jurisdiction-style"
          :unit-code-params="unitCodeParams"
          :m-code="mCode"
        />
        <!-- 管辖运营情况组件 -->

        <!-- 在职员工总数组件 -->
        <employees-total
          class="employees-total-style"
          :unit-code-params="unitCodeParams"
          :m-code="mCode"
        />
        <!-- 在职员工总数组件 -->
      </div>
      <!-- 页面左边内容 -->

      <!-- 页面中间内容 -->
      <div class="inner-content-middle">
        <!-- 轨道车辆统计组件 -->
        <rail-car-statistics
          class="rail-car-statistics-style"
          :unit-code-params="unitCodeParams"
          :m-code="mCode"
        />
        <!-- 轨道车辆统计组件 -->

        <!-- 接触网设备基础组件 -->
        <jcw-device-basis
          class="jcw-device-basis-style"
          :unit-code-params="unitCodeParams"
          :m-code="mCode"
        />
        <!-- 接触网设备基础组件 -->

        <!-- 统计组件 -->
        <statistics
          class="statistics-style"
          :unit-code-params="unitCodeParams"
          :m-code="mCode"
        />
        <!-- 统计组件 -->
      </div>
      <!-- 页面中间内容 -->

      <!-- 页面右边内容 -->
      <div class="inner-content-right">
        <!-- 资料库统计组件 -->
        <database-statistics
          class="database-statistics-style"
          :unit-code-params="unitCodeParams"
          :m-code="mCode"
        />
        <!-- 资料库统计组件 -->

        <!-- 台账资料统计 -->
        <account-data-statistics
          class="account-data-statistics-style"
          :unit-code-params="unitCodeParams"
          :m-code="mCode"
        />
        <!-- 台账资料统计 -->

        <!-- 检测数据统计组件 -->
        <test-data-statistics
          class="test-data-statistics-style"
          :unit-code-params="unitCodeParams"
          :m-code="mCode"
        />
        <!-- 检测数据统计组件 -->
      </div>
      <!-- 页面右边内容 -->
    </div>
    <!-- 页面内容 -->

    <!-- 底部栏 -->
    <div class="footer">
      供电数据中心——中国铁路广州局集团有限公司
    </div>
    <!-- 底部栏 -->

    <!-- 接触网设备基础组件弹出框 -->
    <!-- <jcw-device-basis-popup /> -->
    <!-- 接触网设备基础组件弹出框 -->
  </div>
</template>

<script>
import { findManageDeptTree } from '@/api/main';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';
import Logo from './components/Logo';
import OperationUnderJurisdiction from './components/OperationUnderJurisdiction';
import EmployeesTotal from './components/EmployeesTotal';
import RailCarStatistics from './components/RailCarStatistics';
import JcwDeviceBasis from './components/JcwDeviceBasis';
import Statistics from './components/Statistics';
import DatabaseStatistics from './components/DatabaseStatistics';
import TestDataStatistics from './components/TestDataStatistics';
import AccountDataStatistics from './components/AccountDataStatistics';
// import JcwDeviceBasisPopup from './components/JcwDeviceBasisPopup'
import { mapGetters } from 'vuex';

export default {
  name: 'DataCenterHome',
  components: {
    TopNavigationBar,
    Logo,
    OperationUnderJurisdiction,
    EmployeesTotal,
    RailCarStatistics,
    JcwDeviceBasis,
    Statistics,
    DatabaseStatistics,
    TestDataStatistics,
    AccountDataStatistics
    // JcwDeviceBasisPopup
  },
  data() {
    return {
      // 满足六个段接口请求标识
      unitCodeParams: '',

      // 部门id
      deptId: '',

      // 部门名称
      deptName: '',

      // 部门编码
      mCode: '',

      // 部门树列表
      deptTreeList: []
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.findManageDeptTree(); // 获取当前登入人可以管理的部门树
  },
  methods: {
    // 获取当前登入人可以管理的部门树
    findManageDeptTree() {
      // 获取当前登入人可以管理的部门树
      findManageDeptTree().then(response => {
        var resData = response.data;

        // if：供电部账号登录
        if (this.userInfo.unitDeptCode === '001200') {
          this.unitCodeParams = 'gd';
          this.deptName = this.userInfo.unitDeptName;
        } else { // else：其他段账号登录
          const deptData = this.getChidlren(this.userInfo.deptCode, resData);
          this.deptId = deptData[0].id;
          this.deptName = deptData[0].label;
          this.mCode = deptData[0].obj.mCode;
          if (this.mCode.substring(0, 6) === '001200') {
            this.unitCodeParams = 'gd';
          } else {
            this.unitCodeParams = deptData[0].obj.unitDeptFlag;
          }
          // switch (this.mCode.substring(0, 6)) {
          //   case '001200':
          //     this.unitCodeParams = 'gd'
          //     break
          //   case '001201':
          //     this.unitCodeParams = 'gz'
          //     break
          //   case '001202':
          //     this.unitCodeParams = 'cs'
          //     break
          //   case '001203':
          //     this.unitCodeParams = 'sz'
          //     break
          //   case '001204':
          //     this.unitCodeParams = 'hh'
          //     break
          //   case '001205':
          //     this.unitCodeParams = 'hy'
          //     break
          //   case '001206':
          //     this.unitCodeParams = 'hk'
          //     break
          // }
        }
        this.deptTreeList = resData;
      });
    },

    // 切换段
    changeUnitCodeParams(vm, data) {
      if (data.code !== '') {
        this.unitCodeParams = '';
        setTimeout(() => {
          const deptData = this.getChidlren(data.code, this.deptTreeList);
          this.deptId = deptData[0].id;
          this.deptName = deptData[0].label;
          this.mCode = deptData[0].code;
          if (this.mCode.substring(0, 6) === '001200') {
            this.unitCodeParams = 'gd';
          } else {
            this.unitCodeParams = deptData[0].obj.unitDeptFlag;
          }
          // switch (this.mCode.substring(0, 6)) {
          //   case '001200':
          //     this.unitCodeParams = 'gd'
          //     break
          //   case '001201':
          //     this.unitCodeParams = 'gz'
          //     break
          //   case '001202':
          //     this.unitCodeParams = 'cs'
          //     break
          //   case '001203':
          //     this.unitCodeParams = 'sz'
          //     break
          //   case '001204':
          //     this.unitCodeParams = 'hh'
          //     break
          //   case '001205':
          //     this.unitCodeParams = 'hy'
          //     break
          //   case '001206':
          //     this.unitCodeParams = 'hk'
          //     break
          // }
        }, 50);
      }
    },

    // 查找树数据
    getChidlren(deptCode, data) {
      // 根据ID进行树过滤
      var hasFound = false; // 表示是否有找到id值
      var result = null;
      var fn = function(data) {
        if (Array.isArray(data) && !hasFound) {
          // 判断是否是数组并且没有的情况下，
          data.forEach((item) => {
            if (item.code === deptCode) {
              // 数据循环每个子项，并且判断子项下边是否有id值
              result = item; // 返回的结果等于每一项
              hasFound = true; // 并且找到id值
            } else if (item.children) {
              fn(item.children); // 递归调用下边的子项
            }
          });
        }
      };
      fn(data); // 调用一下
      return [result];
    }
  }
};
</script>

<style lang="scss" scoped>
.background-color {
  background-color: #f1f4fb;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
::v-deep .el-input--medium .el-input__inner {
  height: 28px;
  line-height: 28px;
}
::v-deep .el-input--medium .el-input__icon {
  height: 28px;
  line-height: 28px;
}
.placeholder-div {
  background-color: rgba(8, 27, 77, 1);
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  .top-btn-div {
    color: #666666;
    font-weight: 600;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .top-btn {
      margin: 0 10px;
      cursor: pointer;
    }
    .top-btn:hover {
      color: #54B2FC;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .unit-dept-select {
    position: absolute;
    top: 69px;
    left: 10px;
    width: 355px;
    z-index: 9;
  }
  .inner-content-left {
    position: absolute;
    top: 98px;
    left: 10px;
    bottom: 35px;
    .logo-style {
      height: 50px;
      background-color: #ffffff;
    }
    .operation-under-jurisdiction-style {
      height: 275px;
      margin-top: 10px;
      background-color: #ffffff;
    }
    .employees-total-style {
      height: calc(100% - 345px);
      margin-top: 10px;
      background-color: #ffffff;
    }
  }
  .inner-content-middle {
    position: absolute;
    top: 98px;
    left: 375px;
    bottom: 35px;
    .rail-car-statistics-style {
      height: 110px;
      background-color: #ffffff;
    }
    .jcw-device-basis-style {
      height: calc(100% - 460px);
      margin-top: 10px;
      background-color: #ffffff;
    }
    .statistics-style {
      height: 330px;
      margin-top: 10px;
      background-color: #ffffff;
    }
  }
  .inner-content-right {
    position: absolute;
    top: 98px;
    left: 1555px;
    right: 10px;
    bottom: 35px;
    .database-statistics-style {
      height: 280px;
      background-color: #ffffff;
    }
    .account-data-statistics-style {
      height: 195px;
      margin-top: 10px;
      background-color: #ffffff;
    }
    .test-data-statistics-style {
      height: calc(100% - 495px);
      margin-top: 10px;
      background-color: #ffffff;
    }
  }
}

.footer {
  position: absolute;
  font-size: 12px;
  bottom: 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #ffffff;
  background-color: rgba(8, 27, 77, 1);
}
</style>
